<template>
    <span class="inputLabel">路由编码</span>
    <el-input v-model="apiCacheSearchData.code" placeholder="路由编码" class="searchInfoInput"></el-input>

    <span class="inputLabel">微服务</span>
    <el-select v-model="apiCacheSearchData.applicationName" placeholder="微服务" class="searchInfoInput" clearable>
        <el-option :label="item.applicationName" :value="item.applicationName" v-for="item in applicationList" :key="item.id"/>
    </el-select>

    <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryApiCacheInfo()">搜索</el-button>
    <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
</template>

<script setup name="GatewayRedisCacheSearch" lang="ts">
import {apiRouteRedisCacheInfo} from "@/request/api";
import {applicationInfoQuery} from "@/request/service";
import {computed, ref} from "vue";
import {useApiCacheStore} from "@/stores/apiManage/apiCache";

let applicationList  = ref([]);
let searchLoading  = ref(false);

let apiCacheSearchData = computed(() => {return useApiCacheStore().apiCacheSearchData});

// 查询应用信息
applicationInfoQuery(apiCacheSearchData.value).then(res => {
    if (res["code"] === '200') {
        applicationList.value = res.data;
    }
})

function queryApiCacheInfo() {
    searchLoading.value = true
    apiRouteRedisCacheInfo(apiCacheSearchData.value).then(res => {
        if (res["code"] === '200') {
            useApiCacheStore().resetApiCacheDataList(res.data);
        }
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = false
    })
}

function resetInput() {
    apiCacheSearchData.value["code"] = '';
    apiCacheSearchData.value["applicationName"] = '';
}
</script>

<style scoped lang="less">
.searchInfoInput {
    width: 15%;
    padding-left: 1%;
}
.inputLabel {
    padding-left: 1%;
    font-weight: 700;
    font-size: 15px;
    color: #606266;
}
.searchButtonClass {
    margin-left: 1%;
}
</style>